@import '../style/colors.scss';

::-webkit-scrollbar {
    width: 10px;
    height: 1px;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #cfd0d4;

    &:hover {
        background-color: #c0c2c5;
    }
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: Helvetica;
}

h1,
h2 {
    margin: 0;
}

h3,
h4,
h5,
h6 {
    margin: .4rem 0 0 0;
}

p {
    color: #666;
    font-size: 1rem;
    margin: 0;
    line-height: 1.5rem;

    i {
        font-size: 14px !important;
        margin-right: .4rem;
        line-height: 1.5rem !important;
    }
}

input[type="button"],
input[type="submit"],
button {
    cursor: pointer;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;

    &:active,
    &:focus {
        border: none;
        outline: none;
    }
}

input[type="text"],
input[type="textarea"],
input[type="password"],
textarea {
    border: none;
    outline: none;
    resize: none;
}

input[type="text"].console-input,
input[type="textarea"].console-input,
input[type="password"].console-input,
textarea.console-input {
    font-size: 16px;
    font-family: Helvetica;
    padding: .1rem 0;
    padding-right: 2rem;
    line-height: 2.1rem;
    letter-spacing: 1px;
    color: #606266;
    border-bottom: 1px solid #dcdfe6;

    &:hover,
    &:active,
    &:focus {
        border-bottom: 1px solid #409eff;
    }

    &::placeholder {
        color: #C4C4CF;
    }
}

textarea.console-input {
    line-height: 1.5;
}

.input-item {
    border: 1px solid #ebebeb;
    padding: .5rem 1rem;
    margin-bottom: .6rem;
    border-radius: 5px;

    &:hover {
        box-shadow: 0 0 8px 0 rgb(232 237 250 / 60%), 0 2px 4px 0 rgb(232 237 250 / 50%);
    }
}

.btn {
    margin: 0;
    padding: 12px 20px;
    box-sizing: border-box;
    transition: .1s ease-in-out;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.btn.normal {
    color: #606266;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #dcdfe6;

    &:hover {
        color: #409eff;
        border-color: #c6e2ff;
        background-color: #ecf5ff;
    }

    &.active,
    &:active {
        color: #3a8ee6;
        border-color: #3a8ee6;
    }
}

.btn.menu {
    color: #909399;
    padding: 0 .6rem;
    background-color: transparent;

    &.active {
        color: #303133;
        border-bottom: 2px solid #409EFF;
    }
}

.btn.danger {
    color: #f56c6c;
    border-radius: 4px;
    background-color: #FEF0F0;
    border: 1px solid #fbc4c4;

    &:hover {
        color: white;
        border-color: #dd6161;
        background-color: #F56C6C;
    }

    &:active {
        border-color: #FEF0F0;
    }
}

h3 {
    font-size: 1.2rem;
}

.generator-wrapper {

    @each $color,
    $hash in $colors {

        .color-button.#{$color} {
            background-color: $hash;
        }
    }
}

.controller-btns {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
